<template>
  <el-dialog
    title="查看"
    width="%"
    :visible.sync="visible">
    <avue-form-detail v-model="dataForm" :option="option">
      <template slot="orderStatusForm" slot-scope="scope">
        <span v-if="dataForm.orderStatus == 1">未完成</span>
        <span v-if="dataForm.orderStatus == 2">已完成</span>
        <span v-if="dataForm.orderStatus == 3">已取消</span>
      </template>
      <template slot="payStatusForm" slot-scope="scope">
        <span v-if="scope.row.payStatus === 1">待付款</span>
        <span v-if="scope.row.payStatus === 2">已付款</span>
        <span v-if="scope.row.payStatus === 3">待付款</span>
      </template>
      <template slot="serviceStatusForm" slot-scope="scope">
        <div v-if="scope.row.type==1">
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus==1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1">未接单,等待服务人员联系</span>
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus==1&&scope.row.serviceStatus==2&&scope.row.commentStatus==1">已接单,正在服务中</span>
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus==3&&scope.row.serviceStatus==4&&scope.row.commentStatus==1">服务结束,已经输入付款金额,等待付款</span>
          <span
            v-if="scope.row.orderStatus==2&&scope.row.payStatus==2&&scope.row.serviceStatus==4&&scope.row.commentStatus==1">付款,订单完成,未评价</span>
          <span
            v-if="scope.row.orderStatus==2&&scope.row.payStatus==2&&scope.row.serviceStatus==4&&scope.row.commentStatus==2">评价已完成</span>
          <span
            v-if="scope.row.orderStatus==3&&scope.row.payStatus==1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1">接单前取消</span>
        </div>
        <div v-if="scope.row.type==2">
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1">未接单,等待服务人员联系</span>
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===1&&scope.row.serviceStatus==2&&scope.row.commentStatus==1">已接单,正在服务中</span>
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===3&&scope.row.serviceStatus==4&&scope.row.commentStatus==1">服务结束,已经输入付款金额,等待付款</span>
          <span
            v-if="scope.row.orderStatus==2&&scope.row.payStatus===2&&scope.row.serviceStatus==4&&scope.row.commentStatus==1">付款,订单完成,未评价</span>
          <span
            v-if="scope.row.orderStatus==2&&scope.row.payStatus===2&&scope.row.serviceStatus==4&&scope.row.commentStatus==2">评价已完成</span>
          <span
            v-if="scope.row.orderStatus==3&&scope.row.payStatus===1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1">接单前取消</span>
        </div>
        <div v-if="scope.row.type==3">
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1">未接单,等待服务人员联系</span>
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===1&&scope.row.serviceStatus==2&&scope.row.commentStatus==1">已接单,正在服务中</span>
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===1&&scope.row.serviceStatus==3&&scope.row.commentStatus==1">已接单,需要二次服务</span>
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===3&&scope.row.serviceStatus==4&&scope.row.commentStatus==1">服务结束,已经输入付款金额,等待付款</span>
          <span
            v-if="scope.row.orderStatus==2&&scope.row.payStatus===2&&scope.row.serviceStatus==4&&scope.row.commentStatus==1">付款,订单完成,未评价</span>
          <span
            v-if="scope.row.orderStatus==2&&scope.row.payStatus===2&&scope.row.serviceStatus==4&&scope.row.commentStatus==2">评价已完成</span>
          <span
            v-if="scope.row.orderStatus==3&&scope.row.payStatus===1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1">接单前取消</span>
        </div>
        <div v-if="scope.row.type==4">
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1">未接单,等待服务人员联系</span>
          <span
            v-if="scope.row.orderStatus==2&&scope.row.payStatus===2&&scope.row.serviceStatus==4&&scope.row.commentStatus==2">已接单,订单完成</span>
          <span
            v-if="scope.row.orderStatus==3&&scope.row.payStatus===1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1">接单前取消</span>
        </div>
        <div v-if="scope.row.type==5">
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1">未接单,等待服务人员联系</span>
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===1&&scope.row.serviceStatus==2&&scope.row.commentStatus==1">已接单,正在服务中</span>
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===3&&scope.row.serviceStatus==2&&scope.row.commentStatus==1">已经输入付款金额,等待付款</span>
          <span
            v-if="scope.row.orderStatus==1&&scope.row.payStatus===2&&scope.row.serviceStatus==3&&scope.row.commentStatus==1">付款,拿到衣服,二次服务</span>
          <span
            v-if="scope.row.orderStatus==2&&scope.row.payStatus===2&&scope.row.serviceStatus==4&&scope.row.commentStatus==1">订单完成,送还衣服,未评价</span>
          <span
            v-if="scope.row.orderStatus==2&&scope.row.payStatus===2&&scope.row.serviceStatus==4&&scope.row.commentStatus==2">订单完成,已评价</span>
          <span
            v-if="scope.row.orderStatus==3&&scope.row.payStatus===1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1">接单前取消</span>
        </div>
      </template>
      <template slot-scope="scope">
        <span>{{evaluationlist.images}}</span>
      </template>
    </avue-form-detail>
  </el-dialog>
</template>
<script>
  import {getObj} from '@/api/order/order'

  export default {
    data() {
      return {
        visible: false,
        evaluationlist: {},
        dataForm: {
          orderId: ''
        },
        activeName: 'first',
        option: {
          option: [{
            label: '订单信息',
            prop: 'order',
            icon: 'el-icon-view',
            column: [{
              label: '订单ID',
              prop: 'orderId',
              span: 14
            }, {
              label: '下单时间',
              prop: 'orderCtime',
              span: 10,
            }, {
              label: '服务类型',
              prop: 'typeName',
              span: 8,
            }, {
              label: '下单店铺',
              prop: 'shopName',
              span: 8,
            }, {
              label: '订单金额',
              prop: 'orderAmount',
              span: 8,
            }, {
                label: '优惠券金额',
                prop: 'discountAmount',
                span: 8,
              },{
              label: '支付金额',
              prop: 'payAmount',
              span: 8,
            }, {
              label: '配送员',
              prop: 'deliverymanName',
              span: 8,
            }, {
              label: '配送员电话',
              prop: 'deliverymanPhone',
              span: 8,
            }, {
              label: '订单状态',
              prop: 'orderStatus',
              span: 8,
              formsolt: true,
//              dicData: [{
//                label: '未完成',
//                value: 1
//              }, {
//                label: '已完成',
//                value: 2
//              },{
//                label: '已取消',
//                value: 3
//              }]
            }, {
              label: '支付状态',
              prop: 'payStatus',
              span: 8,
              formsolt: true
            }, {
              label: '服务（配送）状态',
              prop: 'serviceStatus',
              span: 8,
              formsolt: true
            }, {
              label: '订单内容',
              prop: 'buyerRemake',
              span: 24
            },{
              label: '无需付款原因',
              prop: 'endReason',
              span: 24
            }]
          },
            {
              label: '用户信息',
              prop: 'user',
              icon: 'el-icon-edit-outline',
              column: [{
                label: '收件人姓名',
                prop: 'orderMember',
                span: 8
              }, {
                label: '联系电话',
                prop: 'orderMobile',
                span: 8
              }, {
                label: '红旗会员卡号',
                prop: 'orderCardNumber',
                span: 8
              }, {
                label: '收件地址',
                prop: 'orderAddress',
                span: 24,
              }]
            },
            // {
            //   label: '买家备注',
            //   prop: 'reson',
            //   icon: 'el-icon-view',
            //   column: [
            //     {
            //       label: '备注',
            //       prop: 'buyerRemake',
            //       span: 24
            //     }
            //   ]
            // },
            // {
            //   label: '买家评论',
            //   prop: 'reson',
            //   icon: 'el-icon-edit',
            //   viewVisdiplay: false,
            //   visdiplay: false,
            //   column: [
            //     {
            //       label: '评论',
            //       prop: 'isDel',
            //       span: 24,
            //     },
            //     {
            //       label: '评论图片',
            //       prop: 'images',
            //       span: 24,
            //       formsolt: true
            //     }
            //   ]
            // }
          ]
        }
      }
    },
    methods: {
      init(orderId) {
        this.dataForm.orderId = orderId || 0
        this.visible = true
        this.$nextTick(() => {
          if (this.dataForm.orderId) {
            const data = new FormData()
            data.append('orderId', this.dataForm.orderId)
            getObj(data).then(res => {
              console.log('aaaaaaaaaaaaa',res)
              // console.log(res)
              this.dataForm = res.data.order
              this.dataForm.shopName = res.data.shopName
              this.dataForm.typeName = res.data.typeName
              this.dataForm.deliverymanName = res.data.deliverymanName
              this.dataForm.deliverymanPhone = res.data.deliverymanPhone
              this.evaluationlist = res.data.comment
            })
          }
        })
      },
    }
  }
</script>

<style scoped>
  .item {
    white-space: nowrap;
    margin-right: 40px;
    line-height: 30px;
  }

  .title {
    font-size: 16px;
    border-bottom: solid 1px #ccc;
    line-height: 30px;
  }

  .el-dialog__body {
    padding: 10px 20px !important;
  }
</style>
